<template>
	<view class="container">
		<view class="brand">
			<image
				src="https://wx.qlogo.cn/mmopen/vi_32/vM0qx5z4BQUQU4icZNct8Oib0Q0ypMW6hdhejkBxrTzibvYHtdyaQI85hsWvL6PoA3ic3Jjwn99YdfxEj1ib7gvaJeQ/132"
				class="avatar"></image>
			<view class="username">{{ form.customername }}</view>
		</view>
		<view class="user-form">
			<list-cell line-right padding="30rpx">
				<view class="form-item">
					<view class="label">昵称</view>
					<input type="text" v-model="form.customername" />
				</view>
			</list-cell>
			<list-cell line-right padding="30rpx">
				<view class="form-item">
					<view class="label">手机号码</view>
					<input type="text" v-model="form.telphone" />
					<button type="default" plain class="font-size-sm" @tap="showTelphoneModal">更换手机</button>
				</view>
			</list-cell>
			<list-cell line-right padding="30rpx">
				<view class="form-item">
					<view class="label">性别</view>
					<view class="radio" @tap="setGender('M')" :class="{ 'selected': form.gender === 'M' }">
						<image
							:src="form.gender !== 'M' ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'">
						</image>
						<view>男</view>
					</view>
					<view class="radio" @tap="setGender('F')" :class="{ 'selected': form.gender === 'F' }">
						<image
							:src="form.gender !== 'F' ? '/static/images/common/gouxuankuang.png' : '/static/images/common/round-black-selected.png'">
						</image>
						<view>女</view>
					</view>
				</view>
			</list-cell>
			<list-cell line-right padding="30rpx">
				<view class="form-item">
					<view class="label">用户名</view>
					<input type="text" v-model="form.username" />
				</view>
			</list-cell>
			<list-cell line-right padding="30rpx">
				<view class="form-item">
					<view class="label">修改密码</view>
					<input type="password" v-model="form.password" />
				</view>
			</list-cell>
			<list-cell line-right padding="30rpx">
				<view class="form-item">
					<view class="label">确认修改密码</view>
					<input type="password" v-model="confirmPassword" />
				</view>
			</list-cell>
		</view>

		<view class="save-btn">
			<button type="info" @tap="saveUserInfo">保存</button>
		</view>

		<modal :show="telphoneModalVisible" custom padding="40rpx 30rpx">
			<view class="telphone-modal">
				<view class="header">
					<view>温馨提示</view>
					<image src="/static/images/common/closex.png" class="close-icon" @tap="closeTelphoneModal"></image>
				</view>
				<view class="tips">
					为保障您正常使用喜茶GO小程序，请在绑定前确定新手机号未绑定喜茶GO。
				</view>
				<view class="telphone-form">
					<list-cell padding="30rpx 0">
						<view class="telphone-input">
							<view class="prefix">+86</view>
							<input type="text" v-model="telphoneForm.telphone" placeholder="请填写有效手机号码"
								placeholder-class="font-size-base text-color-assist" />
						</view>
					</list-cell>
					<list-cell padding="30rpx 0">
						<view class="verfiycode-input">
							<input type="text" v-model="telphoneForm.verifyCode" placeholder="6位数字验证码"
								placeholder-class="font-size-base text-color-assist">
							<view class="countdown"
								:class="{'text-color-assist': !countdown, 'text-color-base': countdown}"
								@tap="getVerifyCode">
								{{ !countdown ? '获取验证码' : countdown + '秒可获取' }}
							</view>
						</view>
					</list-cell>
				</view>
				<view class="footer">
					<button type="primary" @tap="closeTelphoneModal">确认</button>
				</view>
			</view>
		</modal>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import modal from '@/components/modal/modal.vue'
	import {
		requst_put_customerupdata
	} from '@/api/menu.js'
	export default {
		components: {
			listCell,
			modal
		},
		data() {
			return {
				// form: {
				// 	username: 'tinypuppet',
				// 	telphone: '18666610100',
				// 	gender: 0,
				// 	birthday: '2000-06-01'
				// },
				form: uni.getStorageSync("userInfo"),
				telphoneModalVisible: false,
				telphoneForm: {
					telphone: '',
					verifyCode: ''
				},
				confirmPassword: '',
				countdown: 0
			}
		},
		// watch: {
		// 	'form.password'(newVal) {
		// 		// 监听第一次密码输入的变化，验证两次密码是否一致
		// 		if (newVal !== this.confirmPassword) {
		// 			// 提示用户密码不一致
		// 			uni.showToast({
		// 				title: '两次输入的密码不一致',
		// 				icon: 'none',
		// 			});
		// 		}
		// 	},
		// 	confirmPassword(newVal) {
		// 		// 监听第二次密码输入的变化，验证两次密码是否一致
		// 		if (newVal !== this.form.password) {
		// 			// 提示用户密码不一致
		// 			uni.showToast({
		// 				title: '两次输入的密码不一致',
		// 				icon: 'none',
		// 			});
		// 		}
		// 	},
		// },

		methods: {
			setGender(gender) {
				this.form.gender = gender;
			},
			handleBirthdayChange({
				target: {
					value
				}
			}) {
				this.form.birthday = value
			},
			showTelphoneModal() {
				this.telphoneModalVisible = true
			},
			closeTelphoneModal() {
				console.log(this.form)
				this.telphoneModalVisible = false
				this.telphoneForm = this.$options.data().telphoneForm
			},
			getVerifyCode() {
				if (this.countdown) return

				if (!this.telphoneForm.telphone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: 'none'
					})
					return
				}
				this.countdown = 60
				let interval = setInterval(() => {
					if (!this.countdown) {
						clearInterval(interval)
						return
					}
					this.countdown -= 1
				}, 1000)
			},
			saveUserInfo() {
				// Logic for saving user information
				// You can access the form data from this.form and send it to the server or perform other actions
				if (this.form.password !== this.confirmPassword) {
					// Passwords do not match, show an alert or take any appropriate action
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none',
						duration: 2000,
					});
					return;
				} else {
					const self = this;
					uni.showModal({
						title: '是否修改信息？',
						success: function(res) {
							if (res.confirm) {
								console.log('点击了确认')
								console.log('Saving user information:', self.form)
								const customerupdata = {}
								customerupdata.customerId = self.form.customerId
								customerupdata.customerName = self.form.customername
								customerupdata.username = self.form.username
								customerupdata.password = self.form.password
								customerupdata.customerPhone = self.form.telphone
								customerupdata.customerSex = self.form.gender
								requst_put_customerupdata(customerupdata).then(res => {
									res = res.data;
									if (res.code == 200) {
										uni.showToast({
											title: '修改成功，请重新登录',
											icon: 'success',
											duration: 2000,
										});
										uni.clearStorageSync();
										uni.switchTab({
											url: "../index/index",
										})
									}
								});
							} else {
								console.log('点击了取消')
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.brand {
		background-color: $bg-color-white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		margin-bottom: 20rpx;

		.avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 100%;
			margin-bottom: 30rpx;
		}

		.username {
			color: $font-size-medium;
			font-weight: bold;
		}
	}

	.user-form {
		.form-item {
			width: 100%;
			display: flex;
			align-items: center;

			.label {
				width: 160rpx;
			}

			input {
				flex: 1;
			}

			.radio {
				display: flex;
				margin-right: 50rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.save-btn {
		padding: 0 30rpx;
		margin-top: 60rpx;

		button {
			width: 100%;
			font-size: $font-size-extra-lg;
		}
	}

	.telphone-modal {
		.header {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			font-size: $font-size-extra-lg;
			font-weight: bold;
			margin-bottom: 30rpx;

			.close-icon {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 0;
			}
		}

		.tips {
			color: $text-color-grey;
			line-height: 1.2rem;
			margin-bottom: 50rpx;
		}

		.telphone-form {
			font-size: $font-size-base;

			.telphone-input {
				width: 100%;
				display: flex;
				align-items: center;

				.prefix {
					color: $color-primary;
					display: flex;
					align-items: center;
					padding-right: 20rpx;
					position: relative;
					margin-right: 10rpx;

					&::after {
						content: " ";
						position: absolute;
						width: 4rpx;
						background-color: $border-color;
					}
				}

				input {
					flex: 1;
				}
			}

			.verfiycode-input {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.countdown {
					font-size: $font-size-base;
				}
			}
		}

		.footer {
			margin-top: 30rpx;

			button {
				font-size: $font-size-lg;
			}
		}
	}
</style>